Description

This PR covers the entirety of the development of the @-feature in the chat-input field of Onlook's right-panel. The @-Feature, much like the one in Cursor/VS code, Notion, etc., allows for users to @-mention folders, files, code, and design-panel elements such as brand styles, images, and pages, inside of Onlook's AI Chat window.

Key Features:

• Typing "@" in the Chat Input opens up the "At Menu"
• Fuzzy Search: When a user types "@[followed by anything]" the projects files, folders, code, etc. is queried for a match and the results are shown in the At Menu modal. (note: The fuzzy search, once paired with the 100% real project data in Onlook should be tested to ensure it is working properly).
• The At Menu contains four main sections: Recents, Folders & Files, Code, and Design Panel.
• The Recents section is comprised of the most recent files which you've interacted with; I've included logic in the PR for how recents are returned.
• Items which are "Parents" to other items (e.g., folders) are able to be opened in the menu and explored.

Interactions/Behaviors:

• The At Menu is navigable by mouse and keyboard controls; key board controls include up and down arrows, right and left arrows for going in and out of parent files, enter for selecting files, and backspace or ESC for exiting the menu.
• Chat input functions: @ = opens menu, @[searchterm]/ = opens specified folder.

Related Issues

N/A

Type of Change

• Bug fix
• New feature
• Documentation update
• Release
• Refactor
• Other (please describe):

Testing

• Type "@" into the Chat Input --> @ Menu appears
• Type @brand/ --> Brand Option Open
• Hover on the @ Menu --> Hover states appear for each item
• Scroll with trackpad/mouse --> Menu scrolls (if contents allow it).
• Key up and down the at-menu with arrow keys --> "Hover" states apply to menu items as you navigate the menu, menu scrolls naturally, menu loops back to beginning.
• Add @-menu items to the Chat Input --> @-mentioned items should appear different that regular text.

Screenshots (if applicable)

@-Menu Open:

@-sub-menu (child menu) Open:

@-mention's added to Chat-Input:

Video Demo:
https://github.com/user-attachments/assets/1375ad09-0ef0-4251-8609-b22dad0f70e9

Additional Notes

I used Onlook to prototype the @-feature. Ultimately, the design I implemented in this PR differs slightly from the prototype (this PR is more robust). Have a look at the prototype for a general overview of the functionality of the feature.

Onlook Prototype: https://www.onlook.com/project/a71c51f2-fd13-4584-a20f-fe41268b8515

I need someone to help with the following touches:

• Ensure the At Menu items are using actual data from the project's code base and the Left (Design) Panel.
• Ensure that the AI Model running in the chat understands how to read the @-mentions -- such that they actually add productive context to prompts.
• Ensure the Fuzzy Search is working optimally against the real data.